<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Props的类型校验：
        组件在声明具体的某个prop的时候，可以规定它的一些类型，然后在传递该prop时如果类型不匹配则会报错(开发环境)

      如何定义prop的校验：
        主要就是将 props 选项配置成对象的语法：
          props: {
            key: value
          }
            key: 就是prop的名字
            value: 
                1. 要校验的类型，可以是 String、Array、Number、Boolean、Function、Date。。。
                2. 对象，在对象中通过 type 属性来描述类型，还可以配置
                    required: true  表示该 prop 必须传递
                    default:  {} | function 返回对象，表示该 prop 没有传递的的默认值。

      Prop的名字的注意事项：
        可以是短横线或驼峰语法来定义prop。但是使用时需要转换成 短横线语法。这是 html 的限制。
        同样，如下三种情况不用管这条规则：
          1. template 字符串
          2. <script type="text/x-template">
          3. .vue 单文件组件的时候
   -->
    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <hello name="张三" :age="18" carBrand="大众" work="程序员"></hello>

          <hello name="里斯" :age="20" :grader="2" marry carBrand="宝马" work="架构师"></hello>
        `,
      });

      app.component("hello", {
        template: `
          <div>
            <h2>欢迎</h2>
            <p>姓名：{{ name }}</p>   
            <p>年龄：{{ age }}</p>  
            <p>性别：{{ grader }}</p> 
            <p>爱好：{{ likes }}</p>
            <p>婚否：{{ marry ? '是' : '否' }}</p>
            <p>车的品牌: {{ carBrand }}</p>
          </div>
        `,
        props: {
          name: String, // name 需要传递 字符串类型
          age: Number, // age 需要传递 数值类型
          grader: {
            type: Number, // grader 需要传递的类型是 Number
            default: 1, // 当没有传递的时候使用的默认值
          },
          likes: {
            type: Array,
            // 当默认值为引用数据类型时，需要通过一个函数来返回
            // default: ["唱", "跳", "Rap"],
            default() {
              return ["唱", "跳", "Rap"];
            },
          },
          marry: {
            // Boolean 的类型数据，默认值是 false
            //    传递 Boolean 类型值时，只需要写了就表示传递了 true
            type: Boolean,
          },
          carBrand: {
            type: String,
            required: true, // 表示该 prop 必须传递
          },
          // 自定义校验
          work: {
            validator(value) {
              debugger;
              // value 是该prop具体传递的值
              // 该方法需要有返回值，返回true 表示校验通过，返回false，表示校验失败
              // 必须是前端相关的。
              return value.includes("前端");
            },
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
